<!DOCTYPE html>

<html>

<!-- Mirrored from /theme/hplus/form_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:15 GMT -->

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>乡土味士-后台管理中心 - 编辑图片</title>
<meta name="keywords" content="编辑图片">
<meta name="description" content="编辑图片">
<link rel="shortcut icon" href="favicon.ico">
<link href="__PUBLIC__/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="__PUBLIC__/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="__PUBLIC__/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
<link href="__PUBLIC__/css/style.min862f.css?v=4.1.0" rel="stylesheet">

<!--图片裁剪样式文件-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<link rel="stylesheet" href="__PUBLIC__/cropper/css/main.css">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <form method="post" class="form-horizontal" enctype="multipart/form-data" id="jvForm">
            <div class="form-group">
              <label class="col-sm-2 control-label">图片ID</label>
              <div class="col-sm-6">
                <p class="form-control">
                  <?=$picInfo['id']?>
                </p>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label">图片比例</label>
              <div class="col-sm-6">
                <p class="form-control">
                  <?=$picInfo['proportion']?>
                </p>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label">图片网址</label>
              <div class="col-sm-6">
                <p class="form-control">
                  <?=$picInfo['url']?>
                </p>
              </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
              <label class="col-sm-2 control-label">图片</label>
              <div class="col-sm-10">

                <!-- Content -->
                <div class="container" id="startCropper" style="padding-left: 0;margin-left: 0"> 
                  
                  <!--图片裁剪框-->
                  
                  <div class="row">
                    <div class="col-md-9"> 
                      
                      <!-- <h3>Demo:</h3> -->
                      
                      <div class="img-container"> 

                      <img id="image" src="<?=$img?>" alt="Picture">
                      </div>
                    </div>
                    <div class="col-md-3"> 
                      
                      <!-- 右侧图片预览 -->
                      
                      <div class="docs-preview clearfix">
                        <div class="img-preview preview-lg"></div>
                      </div>
                      
                      <!-- 图片宽高、比例等信息 -->
                      
                      <div class="docs-data">
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataX">X</label>
                          </span>
                          <input type="text" class="form-control" id="dataX" placeholder="x">
                          <span class="input-group-append"> <span class="input-group-text">px</span> </span> </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataY">Y</label>
                          </span>
                          <input type="text" class="form-control" id="dataY" placeholder="y">
                          <span class="input-group-append"> <span class="input-group-text">px</span> </span> </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataWidth">Width</label>
                          </span>
                          <input type="text" class="form-control" id="dataWidth" placeholder="width">
                          <span class="input-group-append"> <span class="input-group-text">px</span> </span> </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataHeight">Height</label>
                          </span>
                          <input type="text" class="form-control" id="dataHeight" placeholder="height">
                          <span class="input-group-append"> <span class="input-group-text">px</span> </span> </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataRotate">Rotate</label>
                          </span>
                          <input type="text" class="form-control" id="dataRotate" placeholder="rotate">
                          <span class="input-group-append"> <span class="input-group-text">deg</span> </span> </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataScaleX">ScaleX</label>
                          </span>
                          <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
                        </div>
                        <div class="input-group input-group-sm"> <span class="input-group-prepend">
                          <label class="input-group-text" for="dataScaleY">ScaleY</label>
                          </span>
                          <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row"> 
                    
                    <!--调整图片位置、方向的按钮-->
                    
                    <div class="col-md-9 docs-buttons">
                      <!-- <h3>Toolbar:</h3> -->
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="移动"> <span class="fa fa-arrows"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="裁剪"> <span class="fa fa-crop"></span> </span> </button>
                      </div>
                      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
                        <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传">
                          <span class="fa fa-upload"></span>
                        </span>
                      </label>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大"> <span class="fa fa-search-plus"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小"> <span class="fa fa-search-minus"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左移"> <span class="fa fa-arrow-left"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="右移"> <span class="fa fa-arrow-right"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上移"> <span class="fa fa-arrow-up"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="下移"> <span class="fa fa-arrow-down"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左旋"> <span class="fa fa-rotate-left"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="右旋"> <span class="fa fa-rotate-right"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleX&quot;, -1)"> <span class="fa fa-arrows-h"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleY&quot;, -1)"> <span class="fa fa-arrows-v"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;crop&quot;)"> <span class="fa fa-check"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="clear" title="Clear"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;clear&quot;)"> <span class="fa fa-remove"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="disable" title="Disable"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;disable&quot;)"> <span class="fa fa-lock"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="enable" title="Enable"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;enable&quot;)"> <span class="fa fa-unlock"></span> </span> </button>
                      </div>
                      <div class="btn-group">
                        <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;reset&quot;)"> <span class="fa fa-refresh"></span> </span> </button>
                        <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;destroy&quot;)"> <span class="fa fa-power-off"></span> </span> </button>
                      </div>
                      <div class="btn-group btn-group-crop">
                        <button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })"> 裁剪 </span> </button>
                      </div>
                      
                      <!-- 图片裁剪后预览框 -->
                      <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1" style="margin-top: 150px;">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                            </div>
                            <div class="modal-body"></div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                              <a class="btn btn-primary" id="picUpladone" data-id="<?=$picInfo['id']?>" href="javascript:void(0);">上传</a>
                              <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg" style="display: none">下载</a> </div>
                          </div>
                        </div>
                      </div>
                      
                      <!-- /.modal --> 
                      
                    </div>
                    
                    <!--图片裁剪比例-->
                    <div class="col-md-3 docs-toggles">
                      <!-- <h3>Toggles:</h3> -->
                      <div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
                        <!--<label class="btn btn-primary active">
                          <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
                          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 16 / 9"> 16:9 </span> </label>
                        <label class="btn btn-primary">
                          <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
                          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 4 / 3"> 4:3 </span> </label>-->
                        <label class="btn btn-primary">
                          <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
                          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 1 / 1"> 1:1 </span> </label>
                        <label class="btn btn-primary">
                          <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="1.5">
                          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: 3 / 2"> 3:2 </span> </label>
                        <label class="btn btn-primary">
                          <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
                          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="aspectRatio: NaN"> 自由 </span> 
                          </label>
                        <label class="btn btn-primary">
                          <span class="docs-tooltip" onClick="window.location.href='__MODULE__/Pic/'">返回</span> 
                          </label>
                          
                          
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script> 

<!--图片裁剪js--> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script> 
<script src="https://fengyuanchen.github.io/js/common.js"></script> 
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script> 
<script src="__PUBLIC__/cropper/js/jquery-cropper.js"></script> 
<script src="__PUBLIC__/cropper/js/main.js"></script> 
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script> 
<script src="__PUBLIC__/js/content.min.js?v=1.0.0"></script> 
<script src="__PUBLIC__/js/plugins/iCheck/icheck.min.js"></script> 

<!--ajaxForm表单提交js--> 

<script src="__PUBLIC__/js/jquery.form.js"></script> 
<script src="__PUBLIC__/js/layer/layer.js"></script> 
<script>

    // 提交裁剪过的图片
    $("#picUpladone").click(function () {

        var domain = 'http://www.xiangtws.com';

        var id = $(this).attr('data-id');   //图片id

        var pic = $(this).attr('data-pic');   //base64位的图片数据

        $.post('http://imgs.xiangtws.com/Api/Index/editPic',{id:id,pic:pic,domain:domain},function (data) {
            window.location.reload();
        })

    })



</script>
</body>

<!-- Mirrored from /theme/hplus/form_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:15 GMT -->

</html>
